<template>
    <div class="login">
        <div class="lrAll">
            <h2>登录</h2>
            <div>
                <span>我还没有账号，立即</span>
                <router-link to="/register" class="gotoLr">注册</router-link>
            </div>
            <form action="" class="loginForm">
                <input type="text" placeholder="请输入用户名" v-model="username">
                <input type="password" placeholder="请输入密码" v-model="password">
                <input type="submit" value="登录" @click="logIn">
            </form>
            <div class="formDown" @click="alertSwal('努力开发中！！')">
                <p>验证码登录</p>
                <p>忘记密码</p>
            </div>
            <div class="signInWith">
                <div class="header">
                    <div></div>
                    <p>第三方登录</p>
                    <div></div>
                </div>
                <div class="theWayList" @click="alertSwal('努力开发中！！')">
                    <img src="../../../../public/login/QQ.png" alt="">
                    <img src="../../../../public/login/weixin.png" alt="">
                    <img src="../../../../public/login/weibo.png" alt="">
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                username: '',
                password: ''
            }
        },
        methods: {
            goTo(path) {
                this.$router.replace(path)
            },
            logIn() {

                this.axios.post(
                    'http://10.30.21.218/login?username=' + this.username + '&password=' + this.password
                ).then((res) => {
                    console.log(res);
                    console.log(res.data.code.msg);
                    if (res.data.code === 200) {
                        this.$cookies.set("user_name", this.username);
                        this.goTo('/mine');
                    } else {
                        if (this.username === '' || this.password === '') {
                            this.alertSwal("用户名和密码不能为空")
                        } else {
                            this.alertSwal("请输入正确的用户名或密码")
                        }

                        this.axios.post('http://10.30.21.218/login?username=' + this.username + '&password=' + this.password).then((res) => {
                            if (res.data.code === 200) {
                                let userData = res.data.data
                                console.log(userData);
                            } else {
                                this.alertSwal(res.data.code.msg)

                            }
                        }).catch((error) => {
                            console.log(error);
                        })
                    }
                })
            }
        }
    }
</script>

<style>
    .lrAll {
        width: 540px;
        margin: 0 auto;
        position: relative;
    }

    .lrAll > h2 {
        width: 88px;
        margin: 30px 0;
        font-size: 44px;
        border-bottom: 4px solid #ec9b38;
    }

    .lrAll > div {
        font-size: 26px;
    }

    .gotoLr {
        color: #e8a41c;
    }

    .lrAll form > input {
        display: block;
        width: 540px;
        height: 88px;
        border: none;
        margin: 30px 0;
        border-radius: 24px;
    }

    .lrAll form > input[type="text"], form > input[type="password"], form > input[type="email"] {
        border: 1px solid #999;
        text-indent: 45px;
        font-size: 24px;
    }

    .lrAll form > input[type="submit"] {
        color: white;
        background: #e8a41c;
        font-size: 30px;
    }

    .formDown {
        display: flex;
        justify-content: space-between;
        color: #999999;
        font-size: 22px;
    }

    .signInWith {
        margin-top: 260px;
    }

    .signInWith > .header {
        width: 380px;
        height: 24px;
        display: flex;
        justify-content: space-between;
        margin: 32px auto;
    }

    .signInWith > .header > p {
        display: flex;
        align-items: center;
        font-size: 24px;
    }

    .signInWith > .header > div {
        width: 120px;
        height: 12px;
        border-bottom: 1px solid #707070;
    }

    .theWayList {
        width: 300px;
        height: 50px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
    }

    .theWayList > img {
        display: block;
        width: 50px;
        height: 50px;
    }
</style>
